import {useContext, useState} from 'react';
import {useNavigate} from 'react-router-dom';
import {Form, Input, Button, message, Checkbox, Divider} from 'antd';
import {loginApi} from '@/api/system/login';
import tools from '@/utils/tools';
import {setToken} from '@/utils/auth.ts';
import {
    FacebookOutlined,
    GithubOutlined,
    GoogleOutlined,
    LockOutlined, SmileFilled,
    TwitterOutlined,
    UserOutlined
} from "@ant-design/icons";
import style from "./index.module.scss"
import {StyleContext} from "@/context/style-context.tsx";
import {useSettings} from "@/hooks/web/useSettings.ts";

interface LoginProps {
    onLoginSuccess: () => void;
}

const Login = ({onLoginSuccess}: LoginProps) => {
    const {language, changeLanguage, locale} = useSettings();
    const [form] = Form.useForm();
    const {namespace} = useContext(StyleContext);
    const [loading, setLoading] = useState(false);
    const navigate = useNavigate();
    const styleList = {
        wrapper: `${namespace}-login`
    }

    const handleLogin = (values: any) => {
        setLoading(true);
        const params = {
            ...values,
            password: tools.md5(values.password),
        };
        loginApi(params).then((res) => {
            loginSuccess(res.token);
        }).finally(() => {
            setLoading(false);
        });
    };
    const loginSuccess = (token: string) => {
        setToken(token);
        message.success('登录成功！').then();
        onLoginSuccess(); // 调用父组件的登录成功回调
        navigate('/');
    };
    return (
        <div
            className={`w-full h-full flex items-center justify-center bg-gradient-to-br from-[#6a11cb] to-[#2575fc] relative overflow-hidden ${style[styleList.wrapper]}`}>
            {/* 背景装饰元素 */}
            <div className="absolute w-[300px] h-[300px] top-[-100px] left-[-100px] rounded-full bg-white/10"></div>
            <div className="absolute w-[200px] h-[200px] bottom-[-50px] right-[-50px] rounded-full bg-white/10"></div>

            {/* 登录卡片容器 */}
            <div className="w-full max-w-md z-10">
                <div
                    className="bg-white/15 backdrop-blur-xl rounded-2xl shadow-2xl p-8 md:p-10 border border-white/20 transition-transform duration-300 hover:translate-y-[-5px]"
                >
                    {/* Logo 区域 */}
                    <div className="text-center mb-8">
                        <div
                            className="inline-flex justify-center items-center w-20 h-20 rounded-full bg-gradient-to-r from-[#ff416c] to-[#ff4b2b] shadow-lg mb-4">
                            <SmileFilled className="text-white text-[80px]"/>
                        </div>
                        <h2 className="text-white text-2xl md:text-3xl font-bold tracking-wide mt-4">{locale.login.title}</h2>
                    </div>

                    {/* Ant Design 表单 */}
                    <Form
                        form={form}
                        name="login"
                        initialValues={{remember: true}}
                        onFinish={handleLogin}
                        autoComplete="off"
                    >
                        {/* 用户名输入框 */}
                        <Form.Item
                            name="username"
                            rules={[{required: true, message: '请输入用户名或邮箱'}]}
                        >
                            <Input
                                prefix={<UserOutlined className="text-white"/>}
                                placeholder="用户名或邮箱"
                                className="bg-white/20 border-transparent rounded-full h-12 text-white placeholder:text-white/70 hover:border-white/50 hover:bg-white/30 focus:border-white/50 !focus:bg-white/30"
                            />
                        </Form.Item>

                        {/* 密码输入框 */}
                        <Form.Item
                            name="password"
                            rules={[{required: true, message: '请输入密码'}]}
                        >
                            <Input.Password
                                prefix={<LockOutlined className="text-white"/>}
                                placeholder="密码"
                                className="bg-white/20 border-transparent rounded-full h-12 text-white placeholder:text-white/70 hover:border-white/50 hover:bg-white/30 focus:border-white/50 focus:bg-white/30!"
                                iconRender={(visible) => (
                                    visible ? (
                                        <LockOutlined className="text-white/70"/>
                                    ) : (
                                        <LockOutlined className="text-white/70"/>
                                    )
                                )}
                            />
                        </Form.Item>

                        {/* 记住我 & 忘记密码 */}
                        <div className="flex justify-between items-center mb-6">
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox className="text-white">
                                    记住我
                                </Checkbox>
                            </Form.Item>

                            <a
                                href="#"
                                className="text-white hover:text-[#ff4b2b] hover:underline transition-colors duration-300"
                            >
                                忘记密码?
                            </a>
                        </div>

                        {/* 登录按钮 */}
                        <Form.Item>
                            <Button
                                type="primary"
                                htmlType="submit"
                                loading={loading}
                                className="w-full h-12 bg-gradient-to-r from-[#ff416c] to-[#ff4b2b] border-none rounded-full text-white font-semibold tracking-wide shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
                            >
                                {loading ? '登录中...' : '登录'}
                            </Button>
                        </Form.Item>
                    </Form>

                    {/* 分隔线 */}
                    <Divider className="text-white/70 before:bg-white/30 after:bg-white/30">
                        或使用以下方式登录
                    </Divider>

                    {/* 社交登录按钮 */}
                    <div className="flex justify-center gap-4 md:gap-6">
                        {[
                            {icon: <GoogleOutlined className="text-lg"/>, color: "bg-red-500"},
                            {icon: <FacebookOutlined className="text-lg"/>, color: "bg-blue-600"},
                            {icon: <TwitterOutlined className="text-lg"/>, color: "bg-blue-400"},
                            {icon: <GithubOutlined className="text-lg"/>, color: "bg-gray-800"}
                        ].map((social, index) => (
                            <Button
                                key={index}
                                shape="circle"
                                icon={social.icon}
                                className={`${social.color} border border-white/30 text-white flex items-center justify-center hover:scale-105 transition-transform duration-300`}
                            />
                        ))}
                    </div>

                    {/* 注册链接 */}
                    <div className="text-center mt-8 text-white text-sm md:text-base">
                        还没有账号?
                        <a href="#"
                           className="ml-1 font-semibold text-[#ffdd00] hover:text-[#ff4b2b] hover:underline transition-colors duration-300">
                            立即注册
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
};
export default Login;
